import { Component, ReactNode } from "react";
import Taro from "@tarojs/taro";
import { View, Button, Navigator } from "@tarojs/components";
import "./index.scss";

export default class Home extends Component {
  state = {
    featureList: [
      {
        name: "1.页面跳转",
        path: "/pages/01_page-router/index",
      },
      {
        name: "2.页面跳转-传递参数",
        path: "/pages/02_router-param/index",
      },
      {
        name: "3.生命周期",
        path: "/pages/03_lifetime/index",
      },
      {
        name: "4.平台判断",
        path: "/pages/04_cross-platform/index",
      },
      {
        name: "5.Redux-class",
        path: "/pages/05_redux-class/index",
      },
      {
        name: "6.Redux-func",
        path: "/pages/06_redux-func/index",
      },
    ],
  };

  // 路由跳转
  navigateTo = (path: string) => {
    Taro.navigateTo({ url: path });
  };

  // 渲染函数
  render(): ReactNode {
    // 返回一个View组件，其中包含一个featureList数组中的每个item的映射
    return (
      <View className="home">
        {this.state.featureList.map((item) => {
          return (
            <Button
              key={item.path}
              onClick={() => this.navigateTo(item.path)}
              className="feature-item"
            >
              {item.name}
            </Button>
          );
        })}
      </View>
    );
  }
}
